<template>
  <div class="family-settings-view">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <button class="back-btn" @click="goBack">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M19 12H5M12 19l-7-7 7-7" stroke="currentColor" stroke-width="2"/>
            </svg>
            返回
          </button>
          <div class="header-text">
            <h1 class="page-title">家庭设置</h1>
            <p class="page-subtitle">管理家庭的隐私、存储、安全等设置</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 设置内容 -->
    <div class="settings-content">
      <!-- 基本信息设置 -->
      <div class="settings-section">
        <div class="section-header">
          <h2 class="section-title">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2"/>
              <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
            </svg>
            基本信息
          </h2>
        </div>

        <div class="settings-card">
          <div class="setting-item">
            <div class="setting-info">
              <h3 class="setting-title">家庭名称</h3>
              <p class="setting-description">设置显示在家庭页面的名称</p>
            </div>
            <div class="setting-control">
              <input
                v-model="settings.familyName"
                class="setting-input"
                type="text"
                @input="handleSettingChange"
              />
            </div>
          </div>

          <div class="setting-item">
            <div class="setting-info">
              <h3 class="setting-title">家庭描述</h3>
              <p class="setting-description">简单介绍你的家庭</p>
            </div>
            <div class="setting-control">
              <textarea
                v-model="settings.familyDescription"
                class="setting-textarea"
                rows="3"
                @input="handleSettingChange"
              ></textarea>
            </div>
          </div>

          <div class="setting-item">
            <div class="setting-info">
              <h3 class="setting-title">家庭头像</h3>
              <p class="setting-description">上传一张代表你们家庭的图片</p>
            </div>
            <div class="setting-control">
              <div class="avatar-upload">
                <div class="current-avatar">
                  <img v-if="settings.familyAvatar" :src="settings.familyAvatar" alt="家庭头像" />
                  <div v-else class="avatar-placeholder">
                    <svg fill="none" viewBox="0 0 24 24">
                      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2"/>
                      <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
                    </svg>
                  </div>
                </div>
                <button class="upload-btn" @click="uploadAvatar">
                  <svg fill="none" viewBox="0 0 24 24">
                    <path d="M7 10l5-5 5 5M12 5v12" stroke="currentColor" stroke-width="2"/>
                  </svg>
                  上传头像
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 隐私设置 -->
      <div class="settings-section">
        <div class="section-header">
          <h2 class="section-title">
            <svg fill="none" viewBox="0 0 24 24">
              <rect height="11" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="11"/>
              <circle cx="12" cy="16" r="1" stroke="currentColor" stroke-width="2"/>
              <path d="M7 11V7a5 5 0 0 1 10 0v4" stroke="currentColor" stroke-width="2"/>
            </svg>
            隐私设置
          </h2>
        </div>

        <div class="settings-card">
          <div class="setting-item">
            <div class="setting-info">
              <h3 class="setting-title">默认内容可见性</h3>
              <p class="setting-description">设置新上传内容的默认可见性</p>
            </div>
            <div class="setting-control">
              <select v-model="settings.defaultVisibility" class="setting-select" @change="handleSettingChange">
                <option value="private">仅自己可见</option>
                <option value="family">家庭成员可见</option>
                <option value="public">公开可见</option>
              </select>
            </div>
          </div>

          <div class="setting-item">
            <div class="setting-info">
              <h3 class="setting-title">允许成员邀请其他人</h3>
              <p class="setting-description">家庭成员是否可以邀请新成员加入</p>
            </div>
            <div class="setting-control">
              <label class="toggle-switch">
                <input
                  v-model="settings.allowMemberInvites"
                  type="checkbox"
                  @change="handleSettingChange"
                />
                <span class="toggle-slider"></span>
              </label>
            </div>
          </div>

          <div class="setting-item">
            <div class="setting-info">
              <h3 class="setting-title">允许评论</h3>
              <p class="setting-description">是否允许家庭成员对内容进行评论</p>
            </div>
            <div class="setting-control">
              <label class="toggle-switch">
                <input
                  v-model="settings.allowComments"
                  type="checkbox"
                  @change="handleSettingChange"
                />
                <span class="toggle-slider"></span>
              </label>
            </div>
          </div>

          <div class="setting-item">
            <div class="setting-info">
              <h3 class="setting-title">地理位置信息</h3>
              <p class="setting-description">是否保存照片和视频的位置信息</p>
            </div>
            <div class="setting-control">
              <label class="toggle-switch">
                <input
                  v-model="settings.saveLocationData"
                  type="checkbox"
                  @change="handleSettingChange"
                />
                <span class="toggle-slider"></span>
              </label>
            </div>
          </div>
        </div>
      </div>

      <!-- 存储设置 -->
      <div class="settings-section">
        <div class="section-header">
          <h2 class="section-title">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" stroke="currentColor" stroke-width="2"/>
            </svg>
            存储管理
          </h2>
        </div>

        <div class="settings-card">
          <div class="storage-overview">
            <div class="storage-info">
              <h3 class="storage-title">存储使用情况</h3>
              <div class="storage-stats">
                <div class="used-storage">
                  <span class="storage-amount">{{ formatStorage(storageUsed) }}</span>
                  <span class="storage-total">/ {{ formatStorage(storageTotal) }}</span>
                </div>
                <div class="storage-percentage">{{ storagePercentage }}% 已使用</div>
              </div>
            </div>
            <div class="storage-progress">
              <div class="progress-bar">
                <div
                  :class="{ 'warning': storagePercentage > 80, 'danger': storagePercentage > 95 }"
                  :style="{ width: storagePercentage + '%' }"
                  class="progress-fill"
                ></div>
              </div>
            </div>
          </div>

          <div class="storage-breakdown">
            <h4 class="breakdown-title">存储分布</h4>
            <div class="breakdown-list">
              <div v-for="item in storageBreakdown" :key="item.type" class="breakdown-item">
                <div class="item-info">
                  <div :class="item.type" class="item-icon">
                    <component :is="item.icon" />
                  </div>
                  <div class="item-details">
                    <span class="item-name">{{ item.name }}</span>
                    <span class="item-count">{{ item.count }} 个文件</span>
                  </div>
                </div>
                <div class="item-size">{{ formatStorage(item.size) }}</div>
              </div>
            </div>
          </div>

          <div class="setting-item">
            <div class="setting-info">
              <h3 class="setting-title">自动清理</h3>
              <p class="setting-description">自动删除超过指定天数的临时文件</p>
            </div>
            <div class="setting-control">
              <select v-model="settings.autoCleanupDays" class="setting-select" @change="handleSettingChange">
                <option value="0">关闭自动清理</option>
                <option value="30">30天</option>
                <option value="60">60天</option>
                <option value="90">90天</option>
                <option value="180">180天</option>
              </select>
            </div>
          </div>

          <div class="setting-item">
            <div class="setting-info">
              <h3 class="setting-title">压缩图片</h3>
              <p class="setting-description">自动压缩上传的图片以节省存储空间</p>
            </div>
            <div class="setting-control">
              <label class="toggle-switch">
                <input
                  v-model="settings.compressImages"
                  type="checkbox"
                  @change="handleSettingChange"
                />
                <span class="toggle-slider"></span>
              </label>
            </div>
          </div>
        </div>
      </div>

      <!-- 通知设置 -->
      <div class="settings-section">
        <div class="section-header">
          <h2 class="section-title">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" stroke="currentColor" stroke-width="2"/>
              <path d="M13.73 21a2 2 0 0 1-3.46 0" stroke="currentColor" stroke-width="2"/>
            </svg>
            通知设置
          </h2>
        </div>

        <div class="settings-card">
          <div class="setting-item">
            <div class="setting-info">
              <h3 class="setting-title">新内容通知</h3>
              <p class="setting-description">当家庭成员上传新内容时通知我</p>
            </div>
            <div class="setting-control">
              <label class="toggle-switch">
                <input
                  v-model="settings.notifications.newContent"
                  type="checkbox"
                  @change="handleSettingChange"
                />
                <span class="toggle-slider"></span>
              </label>
            </div>
          </div>

          <div class="setting-item">
            <div class="setting-info">
              <h3 class="setting-title">评论通知</h3>
              <p class="setting-description">当有人评论我的内容时通知我</p>
            </div>
            <div class="setting-control">
              <label class="toggle-switch">
                <input
                  v-model="settings.notifications.comments"
                  type="checkbox"
                  @change="handleSettingChange"
                />
                <span class="toggle-slider"></span>
              </label>
            </div>
          </div>

          <div class="setting-item">
            <div class="setting-info">
              <h3 class="setting-title">成员活动通知</h3>
              <p class="setting-description">当新成员加入或离开家庭时通知我</p>
            </div>
            <div class="setting-control">
              <label class="toggle-switch">
                <input
                  v-model="settings.notifications.memberActivity"
                  type="checkbox"
                  @change="handleSettingChange"
                />
                <span class="toggle-slider"></span>
              </label>
            </div>
          </div>

          <div class="setting-item">
            <div class="setting-info">
              <h3 class="setting-title">邮件通知</h3>
              <p class="setting-description">通过邮件接收通知</p>
            </div>
            <div class="setting-control">
              <label class="toggle-switch">
                <input
                  v-model="settings.notifications.email"
                  type="checkbox"
                  @change="handleSettingChange"
                />
                <span class="toggle-slider"></span>
              </label>
            </div>
          </div>
        </div>
      </div>

      <!-- 危险操作 -->
      <div class="settings-section">
        <div class="section-header">
          <h2 class="section-title danger">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" stroke="currentColor" stroke-width="2"/>
            </svg>
            危险操作
          </h2>
        </div>

        <div class="settings-card danger">
          <div class="setting-item">
            <div class="setting-info">
              <h3 class="setting-title">导出家庭数据</h3>
              <p class="setting-description">导出所有家庭数据，包括照片、视频和日记</p>
            </div>
            <div class="setting-control">
              <button class="action-btn secondary" @click="exportFamilyData">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="2"/>
                </svg>
                导出数据
              </button>
            </div>
          </div>

          <div class="setting-item">
            <div class="setting-info">
              <h3 class="setting-title">删除家庭</h3>
              <p class="setting-description">永久删除整个家庭及所有数据，此操作不可撤销</p>
            </div>
            <div class="setting-control">
              <button class="action-btn danger" @click="showDeleteConfirm = true">
                <svg fill="none" viewBox="0 0 24 24">
                  <polyline points="3,6 5,6 21,6" stroke="currentColor" stroke-width="2"/>
                  <path d="M19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2" stroke="currentColor" stroke-width="2"/>
                </svg>
                删除家庭
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 删除确认弹窗 -->
    <div v-if="showDeleteConfirm" class="modal-overlay" @click="showDeleteConfirm = false">
      <div class="modal-dialog" @click.stop>
        <div class="modal-header">
          <h3>删除家庭确认</h3>
        </div>
        <div class="modal-body">
          <div class="warning-message">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" stroke="currentColor" stroke-width="2"/>
            </svg>
            <div class="warning-content">
              <p><strong>此操作将永久删除：</strong></p>
              <ul>
                <li>所有家庭成员和邀请</li>
                <li>所有上传的照片和视频</li>
                <li>所有日记和评论</li>
                <li>所有家庭设置和数据</li>
              </ul>
              <p><strong>此操作不可撤销，请谨慎操作！</strong></p>
            </div>
          </div>
          <div class="confirmation-input">
            <label>请输入家庭名称 "{{ settings.familyName }}" 来确认删除：</label>
            <input
              v-model="deleteConfirmText"
              class="confirm-input"
              placeholder="输入家庭名称"
              type="text"
            />
          </div>
        </div>
        <div class="modal-footer">
          <button class="modal-btn secondary" @click="showDeleteConfirm = false">取消</button>
          <button
            :disabled="deleteConfirmText !== settings.familyName"
            class="modal-btn danger"
            @click="deleteFamilyConfirmed"
          >
            确认删除
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import { Notify } from '@opentiny/vue'

const router = useRouter()

// 图标组件
const ImageIcon = defineComponent({
  template: `<svg viewBox="0 0 24 24" fill="none">
    <rect x="3" y="3" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2"/>
    <circle cx="8.5" cy="8.5" r="1.5" stroke="currentColor" stroke-width="2"/>
    <polyline points="21,15 16,10 5,21" stroke="currentColor" stroke-width="2"/>
  </svg>`
})

const VideoIcon = defineComponent({
  template: `<svg viewBox="0 0 24 24" fill="none">
    <polygon points="23,7 16,12 23,17" fill="currentColor"/>
    <rect x="1" y="5" width="15" height="14" rx="2" ry="2" stroke="currentColor" stroke-width="2" fill="none"/>
  </svg>`
})

const AudioIcon = defineComponent({
  template: `<svg viewBox="0 0 24 24" fill="none">
    <path d="M9 18V5l12-2v13" stroke="currentColor" stroke-width="2"/>
    <circle cx="6" cy="18" r="3" stroke="currentColor" stroke-width="2"/>
    <circle cx="18" cy="16" r="3" stroke="currentColor" stroke-width="2"/>
  </svg>`
})

const DocumentIcon = defineComponent({
  template: `<svg viewBox="0 0 24 24" fill="none">
    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" stroke-width="2"/>
    <polyline points="14,2 14,8 20,8" stroke="currentColor" stroke-width="2"/>
  </svg>`
})

// 响应式数据
const showDeleteConfirm = ref(false)
const deleteConfirmText = ref('')
const hasUnsavedChanges = ref(false)

const settings = ref({
  familyName: '温馨的家',
  familyDescription: '记录我们一家人的美好时光',
  familyAvatar: '',
  defaultVisibility: 'family',
  allowMemberInvites: true,
  allowComments: true,
  saveLocationData: true,
  autoCleanupDays: 90,
  compressImages: true,
  notifications: {
    newContent: true,
    comments: true,
    memberActivity: true,
    email: false
  }
})

const storageUsed = ref(2.3 * 1024 * 1024 * 1024) // 2.3GB
const storageTotal = ref(10 * 1024 * 1024 * 1024) // 10GB

const storageBreakdown = ref([
  {
    type: 'images',
    name: '图片',
    count: 1205,
    size: 1.8 * 1024 * 1024 * 1024,
    icon: ImageIcon
  },
  {
    type: 'videos',
    name: '视频',
    count: 28,
    size: 0.4 * 1024 * 1024 * 1024,
    icon: VideoIcon
  },
  {
    type: 'audio',
    name: '音频',
    count: 15,
    size: 0.08 * 1024 * 1024 * 1024,
    icon: AudioIcon
  },
  {
    type: 'documents',
    name: '文档',
    count: 42,
    size: 0.02 * 1024 * 1024 * 1024,
    icon: DocumentIcon
  }
])

// 计算属性
const storagePercentage = computed(() => {
  return Math.round((storageUsed.value / storageTotal.value) * 100)
})

// 工具函数
const formatStorage = (bytes: number): string => {
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  if (bytes === 0) return '0 B'
  const i = Math.floor(Math.log(bytes) / Math.log(1024))
  return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i]
}

// 事件处理
const goBack = () => {
  if (hasUnsavedChanges.value) {
    if (confirm('您有未保存的更改，确定要离开吗？')) {
      router.back()
    }
  } else {
    router.back()
  }
}

const handleSettingChange = () => {
  hasUnsavedChanges.value = true
  // 自动保存设置
  saveSettings()
}

const saveSettings = async () => {
  try {
    // 模拟保存设置
    await new Promise(resolve => setTimeout(resolve, 500))

    hasUnsavedChanges.value = false

    Notify({
      type: 'success',
      message: '设置已保存',
      position: 'top-right'
    })
  } catch (error) {
    Notify({
      type: 'error',
      message: '保存设置失败',
      position: 'top-right'
    })
  }
}

const uploadAvatar = () => {
  // 触发文件选择
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = 'image/*'
  input.onchange = (e: any) => {
    const file = e.target.files[0]
    if (file) {
      // 模拟上传
      const reader = new FileReader()
      reader.onload = (e) => {
        settings.value.familyAvatar = e.target?.result as string
        handleSettingChange()
      }
      reader.readAsDataURL(file)
    }
  }
  input.click()
}

const exportFamilyData = async () => {
  try {
    Notify({
      type: 'info',
      message: '正在准备导出数据...',
      position: 'top-right'
    })

    // 模拟导出过程
    await new Promise(resolve => setTimeout(resolve, 3000))

    Notify({
      type: 'success',
      message: '数据导出成功，请检查下载文件夹',
      position: 'top-right'
    })
  } catch (error) {
    Notify({
      type: 'error',
      message: '数据导出失败',
      position: 'top-right'
    })
  }
}

const deleteFamilyConfirmed = async () => {
  try {
    // 模拟删除操作
    await new Promise(resolve => setTimeout(resolve, 2000))

    Notify({
      type: 'success',
      message: '家庭已删除',
      position: 'top-right'
    })

    // 跳转到首页或登录页
    router.push('/auth/login')
  } catch (error) {
    Notify({
      type: 'error',
      message: '删除失败，请重试',
      position: 'top-right'
    })
  }
}
</script>

<style lang="scss" scoped>
.family-settings-view {
  background: #f8fafc;
  min-height: 100vh;
  padding: 2rem 1rem;

  .page-header {
    max-width: 800px;
    margin: 0 auto 2rem;

    .header-content {
      background: white;
      padding: 1.5rem 2rem;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

      .header-left {
        display: flex;
        align-items: center;
        gap: 1.5rem;

        .back-btn {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.5rem 1rem;
          background: #f3f4f6;
          color: #6b7280;
          border: none;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.2s ease;

          &:hover {
            background: #e5e7eb;
            color: #374151;
          }

          svg {
            width: 16px;
            height: 16px;
          }
        }

        .header-text {
          .page-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: #1e293b;
            margin: 0 0 0.25rem 0;
          }

          .page-subtitle {
            color: #64748b;
            margin: 0;
            font-size: 0.9rem;
          }
        }
      }
    }
  }

  .settings-content {
    max-width: 800px;
    margin: 0 auto;

    .settings-section {
      margin-bottom: 2rem;

      .section-header {
        background: white;
        padding: 1.5rem 2rem;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

        .section-title {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          font-size: 1.25rem;
          font-weight: 600;
          color: #1e293b;
          margin: 0;

          svg {
            width: 20px;
            height: 20px;
            color: #3b82f6;
          }

          &.danger {
            color: #dc2626;

            svg {
              color: #dc2626;
            }
          }
        }
      }

      .settings-card {
        background: white;
        padding: 0;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

        &.danger {
          border-left: 4px solid #dc2626;
        }

        .setting-item {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          padding: 1.5rem 2rem;
          border-bottom: 1px solid #f1f5f9;

          &:last-child {
            border-bottom: none;
          }

          .setting-info {
            flex: 1;
            margin-right: 2rem;

            .setting-title {
              font-size: 1rem;
              font-weight: 500;
              color: #1e293b;
              margin: 0 0 0.25rem 0;
            }

            .setting-description {
              font-size: 0.9rem;
              color: #6b7280;
              margin: 0;
              line-height: 1.4;
            }
          }

          .setting-control {
            flex-shrink: 0;

            .setting-input {
              width: 250px;
              padding: 0.5rem 0.75rem;
              border: 2px solid #e5e7eb;
              border-radius: 6px;
              font-size: 0.9rem;

              &:focus {
                outline: none;
                border-color: #3b82f6;
                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
              }
            }

            .setting-textarea {
              width: 250px;
              padding: 0.5rem 0.75rem;
              border: 2px solid #e5e7eb;
              border-radius: 6px;
              font-size: 0.9rem;
              resize: vertical;
              font-family: inherit;

              &:focus {
                outline: none;
                border-color: #3b82f6;
                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
              }
            }

            .setting-select {
              width: 250px;
              padding: 0.5rem 0.75rem;
              border: 2px solid #e5e7eb;
              border-radius: 6px;
              font-size: 0.9rem;
              background: white;

              &:focus {
                outline: none;
                border-color: #3b82f6;
                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
              }
            }

            .toggle-switch {
              position: relative;
              display: inline-block;
              width: 50px;
              height: 24px;

              input {
                opacity: 0;
                width: 0;
                height: 0;
              }

              .toggle-slider {
                position: absolute;
                cursor: pointer;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: #ccd5db;
                transition: 0.3s;
                border-radius: 12px;

                &:before {
                  position: absolute;
                  content: '';
                  height: 18px;
                  width: 18px;
                  left: 3px;
                  bottom: 3px;
                  background: white;
                  transition: 0.3s;
                  border-radius: 50%;
                }
              }

              input:checked + .toggle-slider {
                background: #3b82f6;
              }

              input:checked + .toggle-slider:before {
                transform: translateX(26px);
              }
            }

            .avatar-upload {
              display: flex;
              align-items: center;
              gap: 1rem;

              .current-avatar {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                overflow: hidden;
                flex-shrink: 0;

                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }

                .avatar-placeholder {
                  width: 100%;
                  height: 100%;
                  background: #e5e7eb;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  color: #9ca3af;

                  svg {
                    width: 24px;
                    height: 24px;
                  }
                }
              }

              .upload-btn {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                padding: 0.5rem 1rem;
                background: #3b82f6;
                color: white;
                border: none;
                border-radius: 6px;
                cursor: pointer;
                transition: background 0.2s ease;

                &:hover {
                  background: #2563eb;
                }

                svg {
                  width: 16px;
                  height: 16px;
                }
              }
            }

            .action-btn {
              display: flex;
              align-items: center;
              gap: 0.5rem;
              padding: 0.5rem 1rem;
              border: none;
              border-radius: 6px;
              cursor: pointer;
              transition: all 0.2s ease;
              font-size: 0.9rem;
              font-weight: 500;

              svg {
                width: 16px;
                height: 16px;
              }

              &.secondary {
                background: #f3f4f6;
                color: #374151;

                &:hover {
                  background: #e5e7eb;
                }
              }

              &.danger {
                background: #fef2f2;
                color: #dc2626;
                border: 1px solid #fecaca;

                &:hover {
                  background: #fee2e2;
                }
              }
            }
          }
        }

        .storage-overview {
          padding: 1.5rem 2rem;
          border-bottom: 1px solid #f1f5f9;

          .storage-info {
            margin-bottom: 1rem;

            .storage-title {
              font-size: 1.1rem;
              font-weight: 600;
              color: #1e293b;
              margin: 0 0 0.5rem 0;
            }

            .storage-stats {
              display: flex;
              align-items: baseline;
              gap: 1rem;

              .used-storage {
                .storage-amount {
                  font-size: 1.5rem;
                  font-weight: 700;
                  color: #3b82f6;
                }

                .storage-total {
                  color: #6b7280;
                  font-size: 1rem;
                }
              }

              .storage-percentage {
                color: #6b7280;
                font-size: 0.9rem;
              }
            }
          }

          .storage-progress {
            .progress-bar {
              width: 100%;
              height: 8px;
              background: #e5e7eb;
              border-radius: 4px;
              overflow: hidden;

              .progress-fill {
                height: 100%;
                background: #3b82f6;
                transition: width 0.3s ease;

                &.warning {
                  background: #f59e0b;
                }

                &.danger {
                  background: #ef4444;
                }
              }
            }
          }
        }

        .storage-breakdown {
          padding: 1.5rem 2rem;
          border-bottom: 1px solid #f1f5f9;

          .breakdown-title {
            font-size: 1rem;
            font-weight: 600;
            color: #1e293b;
            margin: 0 0 1rem 0;
          }

          .breakdown-list {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;

            .breakdown-item {
              display: flex;
              justify-content: space-between;
              align-items: center;

              .item-info {
                display: flex;
                align-items: center;
                gap: 1rem;

                .item-icon {
                  width: 40px;
                  height: 40px;
                  border-radius: 8px;
                  display: flex;
                  align-items: center;
                  justify-content: center;

                  svg {
                    width: 20px;
                    height: 20px;
                  }

                  &.images {
                    background: rgba(59, 130, 246, 0.1);
                    color: #3b82f6;
                  }

                  &.videos {
                    background: rgba(239, 68, 68, 0.1);
                    color: #ef4444;
                  }

                  &.audio {
                    background: rgba(139, 92, 246, 0.1);
                    color: #8b5cf6;
                  }

                  &.documents {
                    background: rgba(107, 114, 128, 0.1);
                    color: #6b7280;
                  }
                }

                .item-details {
                  .item-name {
                    display: block;
                    font-weight: 500;
                    color: #1e293b;
                    margin-bottom: 0.125rem;
                  }

                  .item-count {
                    font-size: 0.8rem;
                    color: #6b7280;
                  }
                }
              }

              .item-size {
                font-weight: 600;
                color: #374151;
              }
            }
          }
        }
      }
    }
  }

  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;

    .modal-dialog {
      background: white;
      border-radius: 12px;
      width: 100%;
      max-width: 500px;
      margin: 1rem;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

      .modal-header {
        padding: 1.5rem 1.5rem 1rem;
        border-bottom: 1px solid #f1f5f9;

        h3 {
          font-size: 1.25rem;
          font-weight: 600;
          color: #dc2626;
          margin: 0;
        }
      }

      .modal-body {
        padding: 1.5rem;

        .warning-message {
          display: flex;
          gap: 1rem;
          margin-bottom: 1.5rem;

          svg {
            width: 24px;
            height: 24px;
            color: #f59e0b;
            flex-shrink: 0;
          }

          .warning-content {
            flex: 1;

            p {
              margin: 0 0 0.75rem 0;
              color: #374151;

              strong {
                color: #dc2626;
              }
            }

            ul {
              margin: 0.5rem 0;
              padding-left: 1.5rem;
              color: #6b7280;

              li {
                margin-bottom: 0.25rem;
              }
            }
          }
        }

        .confirmation-input {
          label {
            display: block;
            font-size: 0.9rem;
            font-weight: 500;
            color: #374151;
            margin-bottom: 0.5rem;
          }

          .confirm-input {
            width: 100%;
            padding: 0.75rem;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 0.9rem;

            &:focus {
              outline: none;
              border-color: #dc2626;
              box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
            }
          }
        }
      }

      .modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
        padding: 1rem 1.5rem 1.5rem;

        .modal-btn {
          padding: 0.75rem 1.5rem;
          border: none;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.2s ease;
          font-weight: 500;

          &.secondary {
            background: #f3f4f6;
            color: #374151;

            &:hover {
              background: #e5e7eb;
            }
          }

          &.danger {
            background: #dc2626;
            color: white;

            &:hover:not(:disabled) {
              background: #b91c1c;
            }

            &:disabled {
              opacity: 0.6;
              cursor: not-allowed;
            }
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .family-settings-view {
    padding: 1rem 0.5rem;

    .page-header .header-content .header-left {
      flex-direction: column;
      gap: 1rem;
      text-align: center;

      .back-btn {
        align-self: flex-start;
      }
    }

    .settings-content {
      .settings-card .setting-item {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;

        .setting-info {
          margin-right: 0;
        }

        .setting-control {
          .setting-input,
          .setting-textarea,
          .setting-select {
            width: 100%;
          }

          .avatar-upload {
            justify-content: center;
          }
        }
      }

      .storage-breakdown .breakdown-list .breakdown-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
      }
    }

    .modal-dialog {
      margin: 0.5rem;
    }
  }
}
</style>
